@import "../../assets/styles/variable";
@import "../../assets/styles/animation";
@keyframes annotation-out {
  0%{
    pointer-events: unset;
  }
  100%{
    pointer-events: none;
  }
}

$header-height: 28px;

pagenote-annotation{
  display: block;
  width: auto !important;
  height: auto;
  font-size: 14px;
  color: #333;
  z-index: $annotationIndex;
  &:hover{
    z-index: $on_hover_annotationIndex;
  }
  pagenote-annotation-inner{
    display: block;
    width: 250px;
    border-radius: 4px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.95);
    transition-property: opacity,transform,min-width;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    &:before{
      content: '';
      display: block;
      width: 100%;
      height: 4px;
      background: var(--color);
      border-radius: 4px 4px 0 0;
    }
    &[data-lighting='annotation']{
      animation: headShake $shakeTime ease-in-out;
    }
    &[data-visiable='0']{
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
    }
    &[data-visiable='1'],&:focus,&:hover{
      opacity: 1;
      transform: translateY(0);
      pointer-events: unset;
    }

    &[data-tip='0']{
      width: 128px;
      box-shadow: none;
      &:before{
        display: none;
      }
      pagenote-block[data-role="annotation-editor"]{
        display: none;
      }
      pagenote-icon[aria-controls="pin"]{
        display: none;
      }
      pagenote-icon{
        box-shadow: 0 1px 3px 1px rgba(60,64,67,0.15), 0 1px 2px 0 rgba(60,64,67,0.3);
      }
      pagenote-annotation-ref{
        display: none;
      }
    }

    &[data-tip='1']{
      &[data-focus='menu']{
        z-index: 1;
        pagenote-annotation-menus{
          //display: none;
          margin-bottom: $header-height + 1px;
        }
        pagenote-annotation-ref{
          //display: block;
          //height: $header-height;
          transform: translateY($header-height);
        }
      }
    }

    pagenote-annotation-header{
      position: relative;
      display: block;
      line-height: $header-height;

      //margin-bottom: 1px;
      pagenote-annotation-menus,pagenote-annotation-ref{
        height: $header-height;
        transition-property: margin-bottom, transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
      }

      pagenote-annotation-menus{
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        cursor: move;
        padding: 2px;
        &:hover{
          background: #f7f6f6;
        }
      }
      pagenote-annotation-ref{
        display: block;
        //z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        //transform: translateY(28px);
        //display: none;
        font-size: 12px;
        //background: #fff;
        height: $header-height;
        overflow: hidden;
        padding: 0 8px;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--color);
      }
    }



    pagenote-block[data-role="custom-content"]{
      font-size: 12px;
      color: #666;
    }

    pagenote-block[data-role="annotation-editor"]{
      padding: 8px;
      font-size: 12px;
      color: #666;
      white-space: break-spaces;
      word-break: break-word;
      img{
        max-width: 100%;
      }
      &:focus-visible{
        outline: unset;
      }
      &:focus{
        display: block;
        //outline: 1px solid var(--color);
        //border: 1px solid var(--color);
        box-shadow: 0 0 0 1px var(--color);
        border-radius: 4px;
        overflow: hidden;
        box-sizing: border-box;
      }
    }

    pagenote-icon{
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      box-shadow: none;
      svg{
        width: 16px;
        height: 16px;
      }
      &:hover{
        //background-color: var(--color);
      }
    }
  }

}
